<template>
  <div class="wrapper">
    <el-alert
      v-if="info.status === 3"
      :title="info.desc"
      :closable="false"
      type="error"
    />
    <div v-if="info.status !== 1">
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">真实姓名：</div>
        </div>
        <el-input v-model="info.real_name" type="text" placeholder="请输入真实姓名" class="input-container" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">身份证正面：</div>
        </div>
        <id-card-front :cover="info.idcard_front_pic" :ratio="front" @cover="handleCoverChangeFront" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">身份证反面：</div>
        </div>
        <id-card-reverse :cover="info.idcard_back_pic" :ratio="back" @cover="handleCoverChangeReverse" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">企业名称：</div>
        </div>
        <el-input v-model="info.business_name" type="text" placeholder="请输入企业名称" class="input-container" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">营业执照编号：</div>
        </div>
        <el-input v-model="info.business_number" type="text" placeholder="请输入营业执照编号" class="input-container" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">营业执照照片：</div>
        </div>
        <license :cover="info.business_license_oic" :ratio="business" @cover="handleCoverChangeLicense" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">开户所在省市区：</div>
        </div>
        <area-select v-model="selected" type="all" :disabled="disable" style="margin-left: 0px" :placeholders="placeholders" :level="2" :data="pcaa" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <!-- <svg-icon icon-class="required" class-name="custom-class" /> -->
          <div class="title">开户名称：</div>
        </div>
        <el-input v-model="info.account_name" type="text" placeholder="请输入开户名称" class="input-container" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">开户行：</div>
        </div>
        <el-input v-model="info.account_bank_name" type="text" placeholder="请输入开户行" class="input-container" />
      </el-row>
      <el-row class="container">
        <div class="title-wrap">
          <svg-icon icon-class="required" class-name="custom-class" />
          <div class="title">银行账号：</div>
        </div>
        <el-input v-model="info.bank_number" type="text" placeholder="请输入银行账号" class="input-container" />
      </el-row>
      <el-button v-if="info.status !== 2" type="primary" class="add-btn" @click="handleSubmit">提交</el-button>
    </div>
    <el-alert
      v-else
      title="店铺审核中，请等待..."
      :closable="false"
      type="warning"
    />
  </div>
</template>
<script>
import IdCardFront from '@/components/cover'
import IdCardReverse from '@/components/cover'
import License from '@/components/cover'
import { pca, pcaa } from 'area-data'
import { attestation, getAttestation } from '@/api/combo'
export default {
  name: 'Attestation',
  components: {
    IdCardFront,
    IdCardReverse,
    License
  },
  data() {
    return {
      info: {
        real_name: '',
        idcard_number: '',
        idcard_front_pic: '',
        idcard_back_pic: '',
        business_name: '',
        business_number: '',
        business_license_oic: '',
        account_name: '',
        account_bank_name: '',
        bank_number: '',
        bank_province: '',
        bank_city: '',
        bank_area: ''
      },
      pca: pca,
      pcaa: pcaa,
      selected: [],
      placeholders: ['请选择', '请选择', '请选择'],
      front: '496*350',
      back: '496*350',
      business: '702*351',
      disable: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    handleCoverChangeFront(pic) {
      this.info.idcard_front_pic = pic
    },
    handleCoverChangeReverse(pic) {
      this.info.idcard_back_pic = pic
    },
    handleCoverChangeLicense(pic) {
      this.info.business_license_oic = pic
    },
    async handleSubmit() {
      const { selected, info } = this
      const flag = this.validity()
      if (flag) {
        info.bank_province = JSON.stringify(selected[0])
        info.bank_city = JSON.stringify(selected[1])
        info.bank_area = JSON.stringify(selected[2])
        await attestation(info)
        this.$message.success({
          message: '提交成功',
          duration: 1000
        })
        this.getInfo()
      }
    },
    validity() {
      const { info, selected } = this
      // const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      const business = /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/
      // const bankReg = /^([1-9]{1})(\d{14}|\d{15}|\d{18})$/
      if (info.real_name.trim() === '') {
        this.$message.warning({
          message: '真实姓名不能为空',
          duration: 1000
        })
        return false
      }
      // if (!idReg.test(info.idcard_number)) {
      //   this.$message.warning({
      //     message: '身份证号码格式错误',
      //     duration: 1000
      //   })
      //   return false
      // }
      if (!info.idcard_front_pic.length) {
        this.$message.warning({
          message: '身份证正面照不能为空',
          duration: 1000
        })
        return false
      }
      if (!info.idcard_back_pic.length) {
        this.$message.warning({
          message: '身份证反面照不能为空',
          duration: 1000
        })
        return false
      }
      if (info.business_name.trim() === '') {
        this.$message.warning({
          message: '企业名称不能为空',
          duration: 1000
        })
        return false
      }
      if (!business.test(info.business_number)) {
        this.$message.warning({
          message: '营业执照格式错误',
          duration: 1000
        })
        return false
      }
      if (!info.business_license_oic.length) {
        this.$message.warning({
          message: '营业执照照片不能为空',
          duration: 1000
        })
        return false
      }
      // if (info.account_name.trim() === '') {
      //   this.$message.warning({
      //     message: '开户名称不能为空',
      //     duration: 1000
      //   })
      //   return false
      // }
      if (info.account_bank_name.trim() === '') {
        this.$message.warning({
          message: '开户行不能为空',
          duration: 1000
        })
        return false
      }
      if (info.bank_number.trim() === '') {
        this.$message.warning({
          message: '银行卡号不能为空',
          duration: 1000
        })
        return false
      }
      if (!selected.length) {
        this.$message.warning({
          message: '请选择城市',
          duration: 1000
        })
        return false
      }
      return true
    },
    async getInfo() {
      const res = await getAttestation()
      const detail = res.data.info
      if (!detail) return
      this.info = detail
      if (detail.real_name.length) {
        const bank_province = Object.keys(JSON.parse(detail.bank_province))[0]
        const bank_city = Object.keys(JSON.parse(detail.bank_city))[0]
        const bank_area = Object.keys(JSON.parse(detail.bank_area))[0]
        this.selected = [bank_province, bank_city, bank_area]
        this.disable = true
      } else {
        this.disable = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .container{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-wrap{
      display: flex;
      width: 150px;
      position: relative;
      .custom-class{
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -15px;
      }
    }
    .title{
      width: 150px;
    }
    .input-container{
      width: 300px;
    }
  }
}
</style>
